﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="/js/header.js"></script>
</head>
<body style="background-color: white;">
    <section class="data-wrap case">

        <div class="data-tool clearfix">
            <div class="pull-left form-inline ">
            </div>
            <div class="pull-right">
                <button type="button" class="btn btn-default btn-sm active" onclick="return service.insert();"><span class="glyphicon glyphicon-plus"></span> 新增</button>
            </div>
        </div>

        <div class="data-body data-scroll">
            <div class="data-view" style="height:620px; overflow-x:hidden;">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="wd250 t_l">中文</th>
                            <th class="wd250 t_l">英文</th>
                            <th class="wd75 t_c">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <script type="text/x-dot-template" id="addTpl">
        <tr>
            <td class="wd250 t_l"><input class="form-control" type="text" name="chinese" maxlength="30" autocomplete="off" placeholder="请输入显示中文"></td>
            <td class="wd250 t_l"><input class="form-control" type="text" name="english" maxlength="30" autocomplete="off" placeholder="请输入显示英文"></td>
            <td class=" t_c wd75">
                <a class="btn btn-default btn-xs btn-danger" onclick="return service.delete(this)"><span class="glyphicon glyphicon-trash"></span>&nbsp;刪除</a>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
        $(function () {
            //FlashPay.UI.DataAutoHeight();
        });
        var service = {
            getAddTpl: function () {
                return doT.template($("#addTpl").text());
            },
            insert: function() {

                var tpl = service.getAddTpl();

                $("table.table tbody").append(tpl(null));
            },
            delete: function (obj) {
                $(obj).parent().parent().remove();
            }

        };
    </script>
</body >
</html >
